<template>
  <div class="sharelist">
    <van-nav-bar title="面经分享">
      <template #left>
        <i @click="$router.go(-1)" class="iconfont iconbtn_nav_back myicon"></i>
      </template>
    </van-nav-bar>
    <van-cell>
      <div class="searchbox" @click="$router.push('/search')">
        <i class="iconfont iconicon_search"></i>
        <span>请输入关键字</span>
      </div>
    </van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <share
        :item="item"
        v-for="(item, index) in shareList"
        :key="index"
      ></share>
    </van-list>
  </div>
</template>

<script>
import share from '../find/share'
import { apiGetShare } from '@/api/find.js'
export default {
  components: {
    share
  },
  data () {
    return {
      start: 0,
      limit: 5,
      shareList: [],
      // 上拉加载
      loading: false,
      finished: false
    }
  },
  methods: {
    // 上拉加载
    async onLoad () {
      // 获取文字列表
      const res = await apiGetShare({ start: this.start, limit: this.limit })

      this.shareList.push(...res.data.list)

      this.start += this.limit
      // 加载状态结束
      this.loading = false

      if (this.shareList.length >= res.data.total) {
        this.finished = true
      }
    }
  },
  created () {}
}
</script>

<style lang="less" scoped>
.sharelist {
  font-size: 12px;
  /deep/.van-nav-bar {
    height: 44px;
    box-shadow: 0px 4px 8px 0px rgba(24, 26, 57, 0.04);
  }
  /deep/.van-nav-bar__left {
    padding-left: 0px;
  }
  .myicon {
    font-size: 50px;
  }
  .searchbox {
    height: 34px;
    background: #f7f4f5;
    border-radius: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b3b3b3;
  }
}
</style>
